<template>


  <a-button type="primary" @click="$refs.cusAddRef.openAdd()">新增</a-button>

  <a-table
    :columns="columns"
    :data-source="page.list"
    :pagination="pagination"
    @change="handleTableChange"
  >
    <!-- 插入名称为cusid的插槽 -->
    <template #cusid="{ text }"> 编号：{{ text }} </template>

    <template #opr="{ record }">
      <a-button @click="openUpd(record)">修改</a-button>
      <a-divider type="vertical" />
      <a-button type="danger" @click="execDel(record.cus_id)">删除</a-button>

      <a-divider type="vertical" />
      <a-button @click="viewDetails(record)">查看详情</a-button>
    </template>
  </a-table>

  <!-- 修改窗口 -->
  <a-modal v-model:visible="visible2" title="修改客户信息" @ok="execUpd">
    <a-form
      :model="updObj"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-item label="客户编号">
        <a-input v-model:value="updObj.cus_id" disabled />
      </a-form-item>
      <a-form-item label="客户名称">
        <a-input v-model:value="updObj.cus_name" />
      </a-form-item>
      <a-form-item label="客户备注">
        <a-textarea v-model:value="updObj.cus_remark" :rows="3" />
      </a-form-item>
    </a-form>
  </a-modal>

  <!-- 引入自定义组件，并定义引用名称cusAddRef   @ok="getPage(page.last+1)" 表示接收到子组件的ok事件后，执行代码getPage(page.last+1) -->
  <customer-add ref="cusAddRef" @ok="getPage(page.last + 1)"></customer-add>
</template>

<script>
import { ref, reactive } from "vue";
import { get, post, put, del, tip } from "@/common";

import CustomerAdd from "./CustomerAdd.vue"; //导入自定义组件

export default {
  components:{CustomerAdd},//使用setup函数方式的时候，自定义组件的引入必须要注册
  setup(props,{emit}) {
    const currPage = ref("customer");

    const columns = [
      {
        dataIndex: "cus_id", //服务端数据
        title: "客户编号", //表头项名称
        //slots定义插槽，即将开发者自定义的内容嵌入
        slots: {
          customRender: "cusid", //定义插槽名称，即以cusid为名插槽的数据插入该列位置
        },
      },
      {
        dataIndex: "cus_name", //服务端数据
        title: "客户名称", //表头项名称
      },
      {
        dataIndex: "cus_remark", //服务端数据
        title: "客户备注", //表头项名称
      },
      {
        key: "opr",
        title: "操作", //表头项名称
        //slots定义插槽，即将开发者自定义的内容嵌入
        slots: {
          customRender: "opr", //定义插槽名称，即以cusid为名插槽的数据插入该列位置
        },
      },
    ];

    //分页处理-start
    const query = reactive({}); //定义查询参数

    const page = ref({}); //接收服务端返回的分页对象

    //分页引擎
    const pagination = reactive({
      current: 1, //当前页
      pageSize: 2, //每页记录数
      total: 0, //总记录数
      pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
      showSizeChanger: true, //是否展示每页记录数下拉框
      showQuickJumper: true, //是否展示快速跳转
      showTotal: (total, range) => {
        //展示总页数等文字说明信息的
        return (
          "共" +
          total +
          "条记录,当前第" +
          pagination.current +
          "页" +
          (range[1] - range[0] + 1) +
          "条记录"
        );
      },
    });

    //获取当前分页
    const getPage = (pageNum = 1) => {
      query.pageNum = pageNum;
      query.pageSize = pagination.pageSize;

      get("/info/customer", query).then((res) => {
        page.value = res.data; //将服务端传来的分页数据赋值予page

        //更新分页引擎
        pagination.current = page.value.current;
        pagination.pageSize = page.value.pageSize;
        pagination.total = page.value.total;
      });
    };
    getPage(1); //页面加载是，首先加载第一页

    //当分页发送变化时（如：页码、每页记录数变化时）
    const handleTableChange = (
      pagi,
      filters,
      sorter,
      { currentDataSource }
    ) => {
      pagination.current = pagi.current;
      pagination.pageSize = pagi.pageSize;
      pagination.total = pagi.total;

      getPage(pagination.current);
    };

    //分页处理-end

    //修改
    const updObj = reactive({
      cus_id: "",
      cus_name: "",
      cus_remark: "",
    });
    const visible2 = ref(false);
    const openUpd = (cus) => {
      updObj.cus_id = cus.cus_id;
      updObj.cus_name = cus.cus_name;
      updObj.cus_remark = cus.cus_remark;
      //打开窗口
      visible2.value = true;
    };
    const exeUpd = () => {
      //执行修改
      put("/info/customer", updObj).then((res) => {
        updObj.cus_id = "";
        updObj.cus_name = "";
        updObj.cus_remark = "";
        visible.value = false;
        tip.success("修改客户成功！");
        getPage(page.value.current);
      });
    };

    //删除
    const execDel = (cus_id) => {
      del("/info/customer/" + cus_id).then((res) => {
        tip.success("删除客户成功！");
        getPage(page.value.current);
      });
    };

    //查看详情
    const viewDetails = (rec) => {
      //向父组件发送事件，表示切换到详情
      emit('toDetails',rec);//发送事件时，可以带参数
    };

    return {
      currPage,
      columns,
      query,
      page,
      pagination,
      getPage,
      handleTableChange,
      updObj,
      visible2  ,
      openUpd,
      exeUpd,
      execDel,
      viewDetails
    };
  },
};
</script>

<style scoped>
</style>